<template>
	<view class="container">
		<view class="content" ref="content">
			<view class="message" v-for="msg in messageList" :key="msg.id">
				<view class="mess.left" v-if="msg.type == 'left'">
					<img src="../../static/image/robt.png" alt=""><br>
					客服
				</view>
				<view class="message-content" :class="{left: msg.type === 'left', right: msg.type === 'right'}">
					<span v-if="msg.infliy==2">{{ msg.content }}</span>
					<img v-else :src="msg.content" alt="" style="width: 200rpx; height: 200rpx;">
				</view>
			</view>
		</view>
		<view class="input">
			<input type="text" class="message-input" placeholder="请输入消息" v-model="inputValue"
				@keyup.enter="sendMessage"/>
			<span class="Butt_img" @click="imgup"><img src="../../static/图片.png" alt=""><br></span>
			<img src="../../static/表情.png" alt="" class="biaoqing" @click='biaoqingbao'>
			<span class="add-action" @click='sercyst'>+</span>
			<button class="send-button" @click="sendMessage">发送</button>
		</view>
		<view class="bqku" v-show="biaoqingkg">
			<span class="Detail_item" v-for="(item,index) in bqbao" :key="index" @click='cmick(item)'>{{item}}</span>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="Butt_img_cli">
				<p @click='quxiao'>取消 </p>
				<view class="u-icon__img">
					<span v-for="(item,index) in imgList" :key="index" @click='fasong(item)'>
						<img :src="item" alt="">
					</span>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bqbao: ['😀', '😃', '😄', '😁', '😆', '😅', '🤣',
					'😂', '🙂', '🙃', '🫠', '😉', '😊', '😇', '🥰', '😍', '🤩', '😘', '😗', '😚', '🤪'
				],
				messageList: [], // 消息列表
				inputValue: '', // 输入框的值
				biaoqingkg: false,
				arr: [],
				imgList: [
					"https://jpg.mac89.com/pic/202211/04150453_24c1553e2f.jpeg",
					"https://img01.sogoucdn.com/app/a/100520093/d7036c9a17f5fda2-e6bbb4e66d1f5541-295acae98aad7f65f53a25827cbe7f8b.jpg",
					"https://img01.sogoucdn.com/app/a/100520093/d7036c9a17f5fda2-e6bbb4e66d1f5541-f36bb84f9984f0aaab8e48fb39e5360b.jpg",
					"https://img01.sogoucdn.com/app/a/100520093/324b99d02820a8f1-f91d22f647cc94d8-b98a16cfd14a51df3d151da0e6adfa82.jpg",
					"https://jpg.mac89.com/pic/202208/30173158_bf159983ea.jpeg",
					"https://jpg.mac89.com/pic/202207/18115731_2e2f0985cc.jpeg",
					"https://img01.sogoucdn.com/app/a/100520093/f7a59a848d5bef5f-55411b4c6d4ce8f0-3d8157f01b4f2129a81c51e026f92c6b.jpg",
					"https://img01.sogoucdn.com/app/a/100520093/d7036c9a17f5fda2-e6bbb4e66d1f5541-8f33517cb807159ea7e70047d87f6396.jpg",
					"https://img.syt5.com/2020/0904/20200904085740291.jpg.1680.0.jpg",
					"https://i04piccdn.sogoucdn.com/c961ddf0f55666f4",
					"http://static.frdic.com/archive/audio/0d/0da464e3-b385-4e3e-839d-b408a98c5974/data/583fd8a9-538e-4942-b6b7-674cbd8b3706.jpg",
					"http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20171102/8ee7a654c8b24ea895e71a8934e0ebd4.jpeg",
					"http://pic1.bbzhi.com/fengjingbizhi/meilizhongguoshanshuiruhua/nature_beautiful_china_summer_wonderland_8515_5.jpg",
					"http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190920/703d45110d7e458cb4424ffdebe7cd44.jpeg",
					"http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190531/2fb6ccec9f154808a09f511e126eb051.jpeg",
					"http://5b0988e595225.cdn.sohucs.com/images/20171206/e26f72c393b343559777250a47d4acab.jpeg",
					"https://i01piccdn.sogoucdn.com/abe9a928183ef390",
					"http://img.mp.sohu.com/upload/20170807/d8d3c433aaf04eb0965bf2086441213d_th.png",
					"http://pic.ntimg.cn/file/20210302/32728004_093050532080_2.jpg",
					"https://desk-fd.zol-img.com.cn/t_s960x600c5/g3/M05/0B/0E/ChMlWF7xvZWID-MKAEhI44U6mbwAAVJlgCFFNQASEj7695.jpg",
				]
			};
		},
		methods: {
			handleKeyDown(){
				console.log(1);
			},
			quxiao(){
				this.$refs.popup.close()
			},
			sercyst() {

			},
			fasong(item) {
				this.imgid = false
				let _this = this;
				const message = {
					id: Date.now(),
					type: 'right',
					content: item,
					infliy: 1
				};
				_this.messageList.push(message);
				_this.$refs.popup.close()
			},
			imgup() {
				this.$refs.popup.open('bottom')
			},
			cmick(item) {
				this.imgid = true
				this.arr.push(item)
				let brr = this.arr.join('')
				this.inputValue = brr;
			},
			biaoqingbao() {
				this.biaoqingkg = !this.biaoqingkg
			},
			// 发送消息
			sendMessage() {
				this.biaoqingkg = false;
				let _this = this;
				// 获取输入框的值
				const content = _this.inputValue.trim();
				// 如果输入框为空，则不做任何处理
				if (!content) return;
				const message = {
					id: Date.now(),
					type: 'right',
					content: content,
					infliy: 2
				};
				_this.messageList.push(message); // 把新消息添加到消息列表中
				_this.inputValue = ''; // 清空输入框的值
				_this.arr = [];
				//获取腾讯机器人消息
				uni.request({
					url: 'http://chat.dslcv.com/sendMessaage',
					method: 'GET',
					data: {
						msg: content
					},
					success(res) {
						const reply = {
							id: Date.now(),
							type: 'left',
							content: res.data.Reply,
							infliy: 2
						};
						_this.messageList.push(reply);
					}
				})

			},
		},
	};
</script>

<style lang="scss">
	.u-icon__img {
		width: 100vw;
		height: 90vh;

		>span {
			display: inline-block;
			width: 200rpx;
			height: 200rpx;
			margin: 20rpx 25rpx;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.Butt_img_cli {
		width: 100vw;
		height: 90vh;
		background-color: #fff;

		>p {
			width: 100vw;
			height: 5vh;
			font-size: 40rpx;
			font-weight: 800;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.Butt_img {
		width: 40rpx;
		height: 40rpx;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.Detail_item {
		font-size: 60rpx;
		padding: 8rpx;
	}

	.bqku {
		border-radius: 20rpx;
		width: 80vw;
		height: 30vh;
		background-color: #fff;
		margin-left: 10vw;
	}

	.biaoqing {
		width: 50rpx;
		height: 50rpx;
		margin: 0 10rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 90vh;
		width: 100vw;
		background-color: rgb(245, 245, 245);
	}

	.add-action {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #000;
		margin: 0 10rpx;
		text-align: center;
		font-size: 40rpx;
		line-height: 38rpx;
	}

	.content {
		flex: 1;
		padding: 20rpx;
		overflow-y: auto;
		width: 100vw;
	}

	.message {
		width: 100vw;
		display: flex;

		.message-content.left {
			background-color: #fff;
			color: #333;
			margin: 8rpx 0;
			justify-content: flex-start;
			border-radius: 0 20rpx 20rpx 20rpx;
		}

		img {
			width: 60rpx;
			height: 60rpx;
		}

		.mess.left {
			img {
				margin-right: 20rpx;
			}
		}

		.message-content.right {
			margin: 8rpx 0;
			background-color: #4a90e2;
			color: #fff;
			margin-left: auto;
			margin-right: 40rpx;
			justify-content: flex-end;
		}
	}

	.message-content {
		padding: 20rpx;
		border-radius: 10rpx;
		max-width: 60%;
		line-height: 1.8;
	}

	.input {
		display: flex;
		justify-content: space-around;
		position: fixed;
		width: 100vw;
		height: 10vh;
		bottom: 0;
		align-items: center;
		background-color: rgb(245, 245, 245);
	}

	.message-input {
		flex: 1;
		padding: 10rpx;
		margin-right: 20rpx;
		font-size: 32rpx;
		background-color: #fff;
		border-radius: 20rpx;
		outline: none;
		margin-left: 40rpx;
	}

	.send-button {
		font-size: 32rpx;
		border: none;
		outline: none;
		background-color: #4a90e2;
		color: #fff;
		border-radius: 10rpx;
		margin-right: 40rpx;
	}
</style>